<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { margin: 0; background: #f0f2f5; font-family: 'Microsoft YaHei', Arial, sans-serif; }
        .layout { display: flex; height: 100vh; }
        .sidebar { width: 220px; background: #23272e; color: #fff; display: flex; flex-direction: column; }
        .sidebar .logo { font-size: 20px; font-weight: bold; padding: 24px 0 24px 32px; background: #1a1d22; letter-spacing: 2px; }
        .sidebar .menu { flex: 1; padding: 0; margin: 0; list-style: none; }
        .sidebar .menu li { padding: 16px 32px; cursor: pointer; transition: background 0.2s; }
        .sidebar .menu li:hover, .sidebar .menu .active { background: #1890ff; }
        .sidebar .menu-title { padding: 16px 32px 8px 32px; color: #aaa; font-size: 13px; }
        .main { flex: 1; display: flex; flex-direction: column; background: #f0f2f5; }
        .header { height: 56px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
        .header .user-info { display: flex; align-items: center; }
        .header .avatar { width: 32px; height: 32px; border-radius: 50%; background: #eee; margin-right: 10px; }
        .header .username { color: #333; margin-right: 16px; }
        .header .logout { color: #1890ff; cursor: pointer; text-decoration: none; }
        .content { flex: 1; background: #fff; margin: 24px 24px 0 24px; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .table-toolbar { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
        .table-toolbar input, .table-toolbar button { padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
        .table-toolbar button { background: #13c2c2; color: #fff; border: none; cursor: pointer; transition: background 0.2s; }
        .table-toolbar button:hover { background: #36cfc9; }
        .table-toolbar .search-btn { background: #1890ff; }
        .table-toolbar .search-btn:hover { background: #40a9ff; }
        .table-toolbar .reset-btn { background: #fff; color: #1890ff; border: 1px solid #1890ff; }
        .table-toolbar .reset-btn:hover { background: #e6f7ff; }
        table { width: 100%; border-collapse: collapse; background: #fff; }
        th, td { border: 1px solid #f0f0f0; padding: 10px 8px; text-align: center; font-size: 14px; }
        th { background: #fafafa; }
        .action-btn { background: #ff4d4f; color: #fff; border: none; border-radius: 4px; padding: 4px 12px; cursor: pointer; margin: 0 2px; }
        .action-btn.edit { background: #1890ff; }
        .action-btn:hover { opacity: 0.85; }
        .pagination { margin: 16px 0 0 0; text-align: right; }
    </style>
</head>
<body>
<div class="layout">
    <div class="sidebar">
        <div class="logo">旅游订单管理系统</div>
        <div class="menu-title">基本功能</div>
        <ul class="menu">
            <li onclick="window.location.href='manage.html'">评论管理</li>
            <li class="active">用户管理</li>
            <li>景点管理</li>
            <li>订单管理</li>
            <li>收入报表</li>
            <li>收入分布图</li>
            <li>注销功能</li>
        </ul>
    </div>
    <div class="main">
        <div class="header">
            <div></div>
            <div class="user-info">
                <div class="avatar"></div>
                <span class="username">admin</span>
                <a class="logout" href="login.html">退出</a>
            </div>
        </div>
        <div class="content">
            <div class="table-toolbar">
                <input type="text" placeholder="用户名">
                <input type="text" placeholder="邮箱">
                <input type="text" placeholder="手机号">
                <button class="search-btn">搜索</button>
                <button class="reset-btn">重置</button>
                <button onclick="addUser()">添加</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>序号</th>
                        <th>用户名</th>
                        <th>密码</th>
                        <th>邮箱</th>
                        <th>手机号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="userTbody"></tbody>
            </table>
        </div>
    </div>
</div>
<script>
function loadUsers() {
    fetch('/api/user', { method: 'GET' })
        .then(response => response.json())
        .then(data => {
            var tbody = document.getElementById('userTbody');
            tbody.innerHTML = '';
            if (Array.isArray(data) && data.length > 0) {
                data.forEach(function(item, idx) {
                    var tr = document.createElement('tr');
                    tr.innerHTML =
                        '<td><input type="checkbox"></td>' +
                        '<td>' + (idx + 1) + '</td>' +
                        '<td class="editable" data-field="username" data-id="' + item.id + '">' + (item.username || '') + '</td>' +
                        '<td class="editable" data-field="password" data-id="' + item.id + '">' + (item.password || '') + '</td>' +
                        '<td class="editable" data-field="email" data-id="' + item.id + '">' + (item.email || '') + '</td>' +
                        '<td class="editable" data-field="phone" data-id="' + item.id + '">' + (item.phone || '') + '</td>' +
                        '<td><button class="action-btn delete" onclick="deleteUser(' + item.id + ')">删除</button></td>';
                    tbody.appendChild(tr);
                });
                // 绑定编辑事件
                document.querySelectorAll('.editable').forEach(function(td) {
                    td.onclick = function() {
                        var oldValue = this.innerText;
                        var field = this.getAttribute('data-field');
                        var id = this.getAttribute('data-id');
                        var newValue = prompt('请输入新的内容：', oldValue);
                        if (newValue !== null && newValue !== oldValue) {
                            // 获取整行数据
                            var tr = this.parentNode;
                            var tds = tr.getElementsByTagName('td');
                            var user = {
                                id: id,
                                username: tds[2].innerText,
                                password: tds[3].innerText,
                                email: tds[4].innerText,
                                phone: tds[5].innerText
                            };
                            user[field] = newValue;
                            fetch('/api/user', {
                                method: 'PUT',
                                headers: { 'Content-Type': 'application/json' },
                                body: JSON.stringify(user)
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    alert('修改成功');
                                    loadUsers();
                                } else {
                                    alert('修改失败');
                                }
                            });
                        }
                    };
                });
            } else {
                var tr = document.createElement('tr');
                tr.innerHTML = '<td colspan="7">暂无数据</td>';
                tbody.appendChild(tr);
            }
        });
}
function addUser() {
    var username = prompt('请输入用户名：');
    if (!username) { alert('用户名不能为空！'); return; }
    var password = prompt('请输入密码：');
    if (!password) { alert('密码不能为空！'); return; }
    var email = prompt('请输入邮箱：');
    var phone = prompt('请输入手机号：');
    var user = { username: username, password: password, email: email, phone: phone };
    fetch('/api/user', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(user)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('添加成功');
            loadUsers();
        } else {
            alert(data.message || '添加失败');
        }
    });
}
function deleteUser(id) {
    if (confirm('确定要删除该用户吗？')) {
        fetch('/api/user/' + id, { method: 'DELETE' })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('删除成功');
                    loadUsers();
                } else {
                    alert(data.message || '删除失败');
                }
            });
    }
}
window.onload = function() { loadUsers(); };
</script>
</body>
</html> 